home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Forms Misc / external-js.izs < prev    next >
Text File  |  2005-09-28  |  15KB  |  340 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>External JS
  4. <!/TITLE>
  5.  
  6. <!DESCRIPTION>Using an external JavaScript file, simply define the rules for how each field should be validated and you're set. Piece of cake! And since it is it's own .js file, it's easy to use the code on every page of your site. Currently only validates text, numbers and e-mail addresses. <!/DESCRIPTION> 
  7.  
  8. <!CATEGORY>Forms<!/CATEGORY>
  9.  
  10. <!SCRIPT>
  11. <!-- START OF SCRIPT -->
  12.  
  13. <!-- FIVE STEPS TO INSTALL EXTERNAL JS:
  14.  
  15.   1.  Copy the first code in a new file, save it as validation.js
  16.   2.  Include the .js file in the HEAD of your HTML document
  17.   3.  Define the validation rules for each field in the HEAD section
  18.   4.  Insert the onLoad event handler into your BODY tag
  19.   5.  Add validate() to your submit button, as shown below -->
  20.  
  21.  
  22. <!-- STEP ONE: Paste this code into a new file, save as validation.js  -->
  23.  
  24.  
  25. // Generic Form Validation
  26. // Jacob Hage (jacob@hage.dk)
  27. var checkObjects    = new Array();
  28. var errors        = "";
  29. var returnVal        = false;
  30. var language        = new Array();
  31. language["header"]    = "The following error(s) occured:"
  32. language["start"]    = "->";
  33. language["field"]    = " Field ";
  34. language["require"]    = " is required";
  35. language["min"]        = " and must consist of at least ";
  36. language["max"]        = " and must not contain more than ";
  37. language["minmax"]    = " and no more than ";
  38. language["chars"]    = " characters";
  39. language["num"]        = " and must contain a number";
  40. language["email"]    = " must contain a valid e-mail address";
  41. // -----------------------------------------------------------------------------
  42. // define - Call this function in the beginning of the page. I.e. onLoad.
  43. // n = name of the input field (Required)
  44. // type= string, num, email (Required)
  45. // min = the value must have at least [min] characters (Optional)
  46. // max = the value must have maximum [max] characters (Optional)
  47. // d = (Optional)
  48. // -----------------------------------------------------------------------------
  49. function define(n, type, HTMLname, min, max, d) {
  50. var p;
  51. var i;
  52. var x;
  53. if (!d) d = document;
  54. if ((p=n.indexOf("?"))>0&&parent.frames.length) {
  55. d = parent.frames[n.substring(p+1)].document;
  56. n = n.substring(0,p);
  57. }
  58. if (!(x = d[n]) && d.all) x = d.all[n];
  59. for (i = 0; !x && i < d.forms.length; i++) {
  60. x = d.forms[i][n];
  61. }
  62. for (i = 0; !x && d.layers && i < d.layers.length; i++) {
  63. x = define(n, type, HTMLname, min, max, d.layers[i].document);
  64. return x;       
  65. }
  66. eval("V_"+n+" = new formResult(x, type, HTMLname, min, max);");
  67. checkObjects[eval(checkObjects.length)] = eval("V_"+n);
  68. }
  69. function formResult(form, type, HTMLname, min, max) {
  70. this.form = form;
  71. this.type = type;
  72. this.HTMLname = HTMLname;
  73. this.min  = min;
  74. this.max  = max;
  75. }
  76. function validate() {
  77. if (checkObjects.length > 0) {
  78. errorObject = "";
  79. for (i = 0; i < checkObjects.length; i++) {
  80. validateObject = new Object();
  81. validateObject.form = checkObjects[i].form;
  82. validateObject.HTMLname = checkObjects[i].HTMLname;
  83. validateObject.val = checkObjects[i].form.value;
  84. validateObject.len = checkObjects[i].form.value.length;
  85. validateObject.min = checkObjects[i].min;
  86. validateObject.max = checkObjects[i].max;
  87. validateObject.type = checkObjects[i].type;
  88. if (validateObject.type == "num" || validateObject.type == "string") {
  89. if ((validateObject.type == "num" && validateObject.len <= 0) || (validateObject.type == "num" && isNaN(validateObject.val))) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['num'] + "\n";
  90. } else if (validateObject.min && validateObject.max && (validateObject.len < validateObject.min || validateObject.len > validateObject.max)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['min'] + validateObject.min + language['minmax'] + validateObject.max+language['chars'] + "\n";
  91. } else if (validateObject.min && !validateObject.max && (validateObject.len < validateObject.min)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['min'] + validateObject.min + language['chars'] + "\n";
  92. } else if (validateObject.max && !validateObject.min &&(validateObject.len > validateObject.max)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['max'] + validateObject.max + language['chars'] + "\n";
  93. } else if (!validateObject.min && !validateObject.max && validateObject.len <= 0) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + "\n";
  94.    }
  95. } else if(validateObject.type == "email") {
  96. // Checking existense of "@" and ".". 
  97. // Length of must >= 5 and the "." must 
  98. // not directly precede or follow the "@"
  99. if ((validateObject.val.indexOf("@") == -1) || (validateObject.val.charAt(0) == ".") || (validateObject.val.charAt(0) == "@") || (validateObject.len < 6) || (validateObject.val.indexOf(".") == -1) || (validateObject.val.charAt(validateObject.val.indexOf("@")+1) == ".") || (validateObject.val.charAt(validateObject.val.indexOf("@")-1) == ".")) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['email'] + "\n"; }
  100.       }
  101.    }
  102. }
  103. if (errors) {
  104. alert(language["header"].concat("\n" + errors));
  105. errors = "";
  106. returnVal = false;
  107. } else {
  108. returnVal = true;
  109.    }
  110. }
  111.  
  112.  
  113. <!-- STEP TWO: Include the .js file in the HEAD of your main document  -->
  114.  
  115. <HEAD>
  116.  
  117. <script language="JavaScript" src="validation.js"></script>
  118.  
  119.  
  120. <!-- STEP THREE: Define the validation rules for each field  -->
  121. <!-- Rules explained in more detail at author's site: -->
  122. <!-- http://www.hagedesign.dk/scripts/js/validation/ -->
  123.  
  124.  
  125. <SCRIPT LANGUAGE="JavaScript">
  126. <!-- Original:  Jacob Hage (jacob@hage.dk) -->
  127. <!-- Web Site:  http://www.hagedesign.dk -->
  128.  
  129.  
  130. <!-- Begin
  131. function init() {
  132. define('field1', 'string', 'Apple');
  133. define('field2', 'string', 'Peach', 4);
  134. define('field3', 'string', 'Cherry', null, 8);
  135. define('field4', 'string', 'Melon', 4, 8);
  136. define('field5', 'num', 'Banana');
  137. define('field6', 'num', 'Grape', 3);
  138. define('field7', 'num', 'Carot', null, 6);
  139. define('field8', 'num', 'Sugar', 4, 6);
  140. define('field9', 'email', 'Fruit');
  141. }
  142. //  End -->
  143. </script>
  144. </HEAD>
  145.  
  146. <!-- STEP FOUR: Insert the onLoad event handler into your BODY tag  -->
  147.  
  148. <BODY OnLoad="init()">
  149.  
  150. <!-- STEP FIVE: Add validate() to your submit button, as shown below -->
  151.  
  152. <center>
  153. <table><tr><td>
  154. <form name=testForm>
  155. apple:<br><input type=text name=field1 size=16> Required<br>
  156. peach:<br><input type=text name=field2 size=16> Required - minimum 4 characters<br>
  157. cherry:<br><input type=text name=field3 size=16> Required - maximum 8 characters<br>
  158. melon:<br><input type=text name=field4 size=16> Required - minimum 4 characters - maximum 8 characters<br>
  159. banana:<br><input type=text name=field5 size=16> Required - Must be a numeric character<br>
  160. grape:<br><input type=text name=field6 size=16> Required - Must be a numeric character - minimum 3 digits<br>
  161. carot:<br><input type=text name=field7 size=16> Required - Must be a numeric character - maximum 6 digits<br>
  162. sugar:<br><input type=text name=field8 size=16> Required - Must be a numeric character - minimum 4 digits - maximum 6 digits<br>
  163. fruit:<br><input type=text name=field9 size=16> Required - Valid e-mail<br>
  164. candy:<br><input type=text name=field10 size=16> Not required<br>
  165. <br>
  166. <input type=submit name=submit onClick="validate();return returnVal;" value="Test fields">
  167. </form>
  168. </td></tr></table>
  169. </center>
  170.  
  171.  
  172. <!-- END OF SCRIPT -->
  173. <!/SCRIPT>
  174.  
  175. <!PREVIEW>
  176. <!-- START OF SCRIPT -->
  177.  
  178. <!-- FIVE STEPS TO INSTALL EXTERNAL JS:
  179.  
  180.   1.  Copy the first code in a new file, save it as validation.js
  181.   2.  Include the .js file in the HEAD of your HTML document
  182.   3.  Define the validation rules for each field in the HEAD section
  183.   4.  Insert the onLoad event handler into your BODY tag
  184.   5.  Add validate() to your submit button, as shown below -->
  185.  
  186.  
  187. <!-- STEP ONE: Paste this code into a new file, save as validation.js  -->
  188.  
  189.  
  190. // Generic Form Validation
  191. // Jacob Hage (jacob@hage.dk)
  192. var checkObjects    = new Array();
  193. var errors        = "";
  194. var returnVal        = false;
  195. var language        = new Array();
  196. language["header"]    = "The following error(s) occured:"
  197. language["start"]    = "->";
  198. language["field"]    = " Field ";
  199. language["require"]    = " is required";
  200. language["min"]        = " and must consist of at least ";
  201. language["max"]        = " and must not contain more than ";
  202. language["minmax"]    = " and no more than ";
  203. language["chars"]    = " characters";
  204. language["num"]        = " and must contain a number";
  205. language["email"]    = " must contain a valid e-mail address";
  206. // -----------------------------------------------------------------------------
  207. // define - Call this function in the beginning of the page. I.e. onLoad.
  208. // n = name of the input field (Required)
  209. // type= string, num, email (Required)
  210. // min = the value must have at least [min] characters (Optional)
  211. // max = the value must have maximum [max] characters (Optional)
  212. // d = (Optional)
  213. // -----------------------------------------------------------------------------
  214. function define(n, type, HTMLname, min, max, d) {
  215. var p;
  216. var i;
  217. var x;
  218. if (!d) d = document;
  219. if ((p=n.indexOf("?"))>0&&parent.frames.length) {
  220. d = parent.frames[n.substring(p+1)].document;
  221. n = n.substring(0,p);
  222. }
  223. if (!(x = d[n]) && d.all) x = d.all[n];
  224. for (i = 0; !x && i < d.forms.length; i++) {
  225. x = d.forms[i][n];
  226. }
  227. for (i = 0; !x && d.layers && i < d.layers.length; i++) {
  228. x = define(n, type, HTMLname, min, max, d.layers[i].document);
  229. return x;       
  230. }
  231. eval("V_"+n+" = new formResult(x, type, HTMLname, min, max);");
  232. checkObjects[eval(checkObjects.length)] = eval("V_"+n);
  233. }
  234. function formResult(form, type, HTMLname, min, max) {
  235. this.form = form;
  236. this.type = type;
  237. this.HTMLname = HTMLname;
  238. this.min  = min;
  239. this.max  = max;
  240. }
  241. function validate() {
  242. if (checkObjects.length > 0) {
  243. errorObject = "";
  244. for (i = 0; i < checkObjects.length; i++) {
  245. validateObject = new Object();
  246. validateObject.form = checkObjects[i].form;
  247. validateObject.HTMLname = checkObjects[i].HTMLname;
  248. validateObject.val = checkObjects[i].form.value;
  249. validateObject.len = checkObjects[i].form.value.length;
  250. validateObject.min = checkObjects[i].min;
  251. validateObject.max = checkObjects[i].max;
  252. validateObject.type = checkObjects[i].type;
  253. if (validateObject.type == "num" || validateObject.type == "string") {
  254. if ((validateObject.type == "num" && validateObject.len <= 0) || (validateObject.type == "num" && isNaN(validateObject.val))) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['num'] + "\n";
  255. } else if (validateObject.min && validateObject.max && (validateObject.len < validateObject.min || validateObject.len > validateObject.max)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['min'] + validateObject.min + language['minmax'] + validateObject.max+language['chars'] + "\n";
  256. } else if (validateObject.min && !validateObject.max && (validateObject.len < validateObject.min)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['min'] + validateObject.min + language['chars'] + "\n";
  257. } else if (validateObject.max && !validateObject.min &&(validateObject.len > validateObject.max)) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + language['max'] + validateObject.max + language['chars'] + "\n";
  258. } else if (!validateObject.min && !validateObject.max && validateObject.len <= 0) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['require'] + "\n";
  259.    }
  260. } else if(validateObject.type == "email") {
  261. // Checking existense of "@" and ".". 
  262. // Length of must >= 5 and the "." must 
  263. // not directly precede or follow the "@"
  264. if ((validateObject.val.indexOf("@") == -1) || (validateObject.val.charAt(0) == ".") || (validateObject.val.charAt(0) == "@") || (validateObject.len < 6) || (validateObject.val.indexOf(".") == -1) || (validateObject.val.charAt(validateObject.val.indexOf("@")+1) == ".") || (validateObject.val.charAt(validateObject.val.indexOf("@")-1) == ".")) { errors += language['start'] + language['field'] + validateObject.HTMLname + language['email'] + "\n"; }
  265.       }
  266.    }
  267. }
  268. if (errors) {
  269. alert(language["header"].concat("\n" + errors));
  270. errors = "";
  271. returnVal = false;
  272. } else {
  273. returnVal = true;
  274.    }
  275. }
  276.  
  277.  
  278. <!-- STEP TWO: Include the .js file in the HEAD of your main document  -->
  279.  
  280. <HEAD>
  281.  
  282. <script language="JavaScript" src="validation.js"></script>
  283.  
  284.  
  285. <!-- STEP THREE: Define the validation rules for each field  -->
  286. <!-- Rules explained in more detail at author's site: -->
  287. <!-- http://www.hagedesign.dk/scripts/js/validation/ -->
  288.  
  289.  
  290. <SCRIPT LANGUAGE="JavaScript">
  291. <!-- Original:  Jacob Hage (jacob@hage.dk) -->
  292. <!-- Web Site:  http://www.hagedesign.dk -->
  293.  
  294.  
  295. <!-- Begin
  296. function init() {
  297. define('field1', 'string', 'Apple');
  298. define('field2', 'string', 'Peach', 4);
  299. define('field3', 'string', 'Cherry', null, 8);
  300. define('field4', 'string', 'Melon', 4, 8);
  301. define('field5', 'num', 'Banana');
  302. define('field6', 'num', 'Grape', 3);
  303. define('field7', 'num', 'Carot', null, 6);
  304. define('field8', 'num', 'Sugar', 4, 6);
  305. define('field9', 'email', 'Fruit');
  306. }
  307. //  End -->
  308. </script>
  309. </HEAD>
  310.  
  311. <!-- STEP FOUR: Insert the onLoad event handler into your BODY tag  -->
  312.  
  313. <BODY OnLoad="init()">
  314.  
  315. <!-- STEP FIVE: Add validate() to your submit button, as shown below -->
  316.  
  317. <center>
  318. <table><tr><td>
  319. <form name=testForm>
  320. apple:<br><input type=text name=field1 size=16> Required<br>
  321. peach:<br><input type=text name=field2 size=16> Required - minimum 4 characters<br>
  322. cherry:<br><input type=text name=field3 size=16> Required - maximum 8 characters<br>
  323. melon:<br><input type=text name=field4 size=16> Required - minimum 4 characters - maximum 8 characters<br>
  324. banana:<br><input type=text name=field5 size=16> Required - Must be a numeric character<br>
  325. grape:<br><input type=text name=field6 size=16> Required - Must be a numeric character - minimum 3 digits<br>
  326. carot:<br><input type=text name=field7 size=16> Required - Must be a numeric character - maximum 6 digits<br>
  327. sugar:<br><input type=text name=field8 size=16> Required - Must be a numeric character - minimum 4 digits - maximum 6 digits<br>
  328. fruit:<br><input type=text name=field9 size=16> Required - Valid e-mail<br>
  329. candy:<br><input type=text name=field10 size=16> Not required<br>
  330. <br>
  331. <input type=submit name=submit onClick="validate();return returnVal;" value="Test fields">
  332. </form>
  333. </td></tr></table>
  334. </center>
  335.  
  336. <!-- END OF SCRIPT -->
  337. <!/PREVIEW>
  338.  
  339. <!RELATED>NONE<!/RELATED>
  340.